<template>
	<div class="app-edit">
		<div class="h-panel">
			<div class="h-panel-bar">
				<span class="h-panel-title">用户管理</span>
				<span class="h-panel-right"><a @click="close"><i class="icon guanbi"></i></a></span>
			</div>
			<Tabs v-if="id > 0" :datas="tabs" v-model="selected" @change="changeTab"></Tabs>
			<div class="h-panel-body" v-if="selected == 'info'">
				<Form class="setting-form" mode="twocolumn">
					<FormItem label="账号" prop="phone">
						<input type="text" readonly="readonly" :value="data.phone"/>
					</FormItem>
					<FormItem label="昵称">
						<input type="text" readonly="readonly" :value="data.nickname"/>
					</FormItem>
					<FormItem label="头像">
						<img class="infoAvatar" :src="data.avatar || '/static/avatar.png'" @click="$ImagePreview(data.avatar)" @error="$imageError"/>
					</FormItem>
					<FormItem label="性别">
						<input type="text" readonly="readonly" :value="data.gender > 0 ? (data.gender == 1 ? '男' : '女') : '未知'"/>
					</FormItem>
					<FormItem label="地区">
						<input type="text" readonly="readonly" :value="data.province + ' ' + data.city"/>
					</FormItem>
					<Render v-if="dataForm.length > 0" v-for="(item,index) in dataForm" :key="index" :conf="item || {}"></Render>
					<FormItem single>
						<Button color="primary" @click="submit">提交</Button>
						<Button @click="close">取消</Button>
					</FormItem>
				</Form>
			</div>
			<div class="h-panel-body" v-if="selected == 'favorite'">
				<Table :loading="loading" :datas="list">
					<TableItem :width="100" align="center" title="产品编号">
						<template slot-scope="{data}">
							{{data.product.id}}
						</template>
					</TableItem>
					<TableItem :width="200" align="center" title="产品标题">
						<template slot-scope="{data}">
							{{data.product.name}}
						</template>
					</TableItem>
					<TableItem :width="200" align="center" title="产品图片">
						<template slot-scope="{data}">
							<img :src="data.product.pic" class="tableimg" @click="$ImagePreview(data.product.pic)" @error="$imageError">
						</template>
					</TableItem>
					<TableItem :width="100" align="center" title="产品价格">
						<template slot-scope="{data}">
							{{data.product.price}}
						</template>
					</TableItem>
					<TableItem :width="150" prop="create_time" align="center" title="收藏时间"></TableItem>
				</Table>
				<p></p>
				<Pagination v-if="pagination.total>0"  align="right" v-model="pagination" @change="getList(false)" />
			</div>
			<div class="h-panel-body" v-if="selected == 'history'">
				<Table :loading="loading" :datas="list">
					<TableItem :width="100" align="center" title="产品编号">
						<template slot-scope="{data}">
							{{data.product.id}}
						</template>
					</TableItem>
					<TableItem :width="200" align="center" title="产品标题">
						<template slot-scope="{data}">
							{{data.product.name}}
						</template>
					</TableItem>
					<TableItem :width="200" align="center" title="产品图片">
						<template slot-scope="{data}">
							<img :src="data.product.pic" class="tableimg" @click="$ImagePreview(data.product.pic)" @error="$imageError">
						</template>
					</TableItem>
					<TableItem :width="100" align="center" title="产品价格">
						<template slot-scope="{data}">
							{{data.product.price}}
						</template>
					</TableItem>
					<TableItem :width="150" prop="create_time" align="center" title="收藏时间"></TableItem>
				</Table>
				<p></p>
				<Pagination v-if="pagination.total>0"  align="right" v-model="pagination" @change="getList(false)" />
			</div>
		</div>
	</div>
</template>

<script>
import {Render} from '@/components/custom-form'
export default {
	components : {
		Render
	},
	props: {
		id: Number
	},
	data() {
		return {
			tabs: {
				'info':'基本信息',
				'favorite':'收藏内容',
				'history':'用户足迹'
			},
			selected: 'info',
			data: {},
			dataForm : [],
			list: [],
			pagination: {
				page: 1,
				size: 10,
				total: 0
			},
			loading: false
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		async getData() {
			let userForm = this.$global.getArrayById(this.$global.config.forms,this.$global.config.user_form_id,'data')
			if(this.id > 0){
				this.data = await this.$api('GET','user/'+this.id)
				this.dataForm = this.$global.putCustomFormData(userForm,this.data.form)
			}else{
				this.dataForm = userForm
			}
		},
		async submit (){
			let res = ''
			this.data.form = this.$global.getCustomFormData(this.dataForm)
			this.loading = true
			if(this.id > 0){
				res = await this.$api('PUT','user/'+this.id,this.data)
			}else{
				res = await this.$api('POST','user',this.data)
			}
			this.loading = false
			if(res){
				this.close()
			}
		},
		async getList(reload = true) {
			this.loading = true
			if (reload) {
				this.pagination.page = 1
			}
			let data = await this.$api('GET',this.selected,{page:this.pagination.page,pageSize:this.pagination.size,user_id:this.id})
			this.list = data.data
			this.pagination.total = data.total
			this.loading = false
		},
		changeTab(data) {
			this.list = []
			this.selected = data.id
			if(this.selected != 'info'){
				this.getList()
			}
		},
		close (){
			this.$emit('close')
		}
	}
};
</script>

<style lang="less">
	.productTable{
		th {
			height: 25px;
		}
		.productPic {
			height: 50px;
			max-width: 120px;
			border-radius:5px;
		}
	}
	.infoAvatar{
		height: 75px;
		width: 75px;
		border-radius: 38px;
	}
</style>